<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10_XHR-超时时间的取消请求</title>
</head>
<body>

  <button>取消请求</button>

  <script>
    const xhr = new XMLHttpRequest();

    

    xhr.open('GET', 'https://api.apiopen.top/getJoke');

    // 设置返回格式
    xhr.responseType = 'json';

    // 设置超时时间
    xhr.timeout = 2000;

    // 设置超时回调
    xhr.ontimeout = function () {
      console.log('请求超时');
    }

    // onabort监听取消请求
    xhr.onabort = function () {
      console.log('请求被取消');
    }

    // 监听请求状态
    xhr.onload = function () {
      console.log(xhr.response);
    }

    // xhr.open()方法中第三个参数默认为true，表示异步请求
    xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout")

    // 发送请求
    xhr.send();

    // 手动取消结果
    const cancelBtn = document.querySelector("button")
    cancelBtn.onclick = function() {
      xhr.abort()
    }


  </script>
  
</body>
</html>